﻿<!DOCTYPE html>
<html>

<head>
{include head_content}
	<!-- morris charts -->
	<link rel="stylesheet" href="View/CQQ/charts/css/morris.css">
	<!-- jvectormap -->
	<link rel="stylesheet" href="View/CQQ/css/jquery-jvectormap.css">
	<link rel="stylesheet" href="View/CQQ/css/jquery.jgrowl.css">
	<style>
		.tableButton{
			cursor: pointer
		}
	</style>
</head>

<body>

	{include right_set}
	<div class="wrapper">		
		<!-- Page Content -->
		<div id="content">
		{include h}
			<!-- Breadcrumb -->
			<!-- Page Title -->
			<div class="container mt-0">
				<div class="row breadcrumb-bar">
					<div class="col-md-6">
						<h3 class="block-title">系统状态</h3>
					</div>
					<div class="col-md-6">
						<ol class="breadcrumb">
							<li class="breadcrumb-item">
								<a href="index.html">
									<span class="ti-home"></span>
								</a>
							</li>
							<li class="breadcrumb-item active">系统状态</li>
						</ol>
					</div>
				</div>
			</div>
			<!-- /Page Title -->
			<!-- /Breadcrumb -->
			<!-- Main Content -->
			<div class="container home">

				<div class="row">

					<!-- Widget Item -->
					<div class="col-md-12">
						<div class="widget-area-2 progress-status lochana-box-shadow">
							<h3 class="widget-title">业务进程
								<button type="button" class="btn btn-success btn-sm" data-toggle="modal" id="buttonAddRule"> 
									<span class="ti-plus">&nbsp;</span>添加
								</button>
							</h3>
							<div class="table-responsive">
								<table class="table table-bordered">
									<thead>
										<tr>
											<th>ID</th>
											<th>IP</th>
											<th>端口</th>
											<th>传输协议</th>
											<th>限速</th>
											<th>操作</th>	
										</tr>
									</thead>
									<tbody id="tableRule">
									

									</tbody>
								</table>
							</div>

						</div>
					</div>
					
					<!-- /Widget Item -->

				</div>

			</div>
			<!-- /Main Content -->
			<!-- 添加规则  aria-labelledby1="exampleModalLabel1"-->
			<div class="modal fade " id="addRuleModal" tabindex="-1" role="dialog"  aria-hidden="true">
				<div class="modal-dialog modal-lg" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="addRuleModalTitle">添加规则</h5>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">
							<form>
								<fieldset class="form-group">
									<div class="row">
									  <legend class="col-form-label col-sm-2 pt-0">地址类型</legend>
									  <div class="col-sm-10">
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="address_type" id="addressRadio1" value="range" checked>
											<label class="form-check-label" for="addressRadio1">地址段</label>
										  </div>
										  <div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="address_type" id="addressRadio2" value="subnet">
											<label class="form-check-label" for="addressRadio2">子网</label>
										  </div>
									  </div>
									</div>
								  </fieldset>
								<div class="form-group row">
								  <label for="address-first" class="col-sm-2 col-form-label">地址1</label>
								  <div class="col-sm-10">
									<input type="ip" class="form-control" id="address_first" placeholder="192.168.1.1">
								  </div>
								</div>
								<div class="form-group row">
								  <label for="address-second" class="col-sm-2 col-form-label">地址 2</label>
								  <div class="col-sm-10">
									<input type="ip" class="form-control" id="address_second" placeholder="192.168.1.2 或 24">
								  </div>
								</div>
								<fieldset class="form-group">
									<div class="row">
									  <legend class="col-form-label col-sm-2 pt-0">端口类型</legend>
									  <div class="col-sm-10">
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="port_type" id="portRadio1" value="range" checked>
											<label class="form-check-label" for="portRadio1">范围</label>
										  </div>
										  <div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="port_type" id="portRadio2" value="tags">
											<label class="form-check-label" for="portRadio2">应用类型</label>
										  </div>
									  </div>
									</div>
								  </fieldset>
								  <div class="form-group row">
									<label for="address-first" class="col-sm-2 col-form-label">端口1</label>
									<div class="col-sm-10">
									  <input type="port" class="form-control" id="port_first" placeholder="192.168.1.1">
									</div>
								  </div>
								  <div class="form-group row">
									<label for="address-second" class="col-sm-2 col-form-label">端口2</label>
									<div class="col-sm-10">
									  <input type="port" class="form-control" id="port_second" placeholder="192.168.1.2 或 24">
									</div>
								  </div>
								  <fieldset class="form-group">
									<div class="row">
									  <legend class="col-form-label col-sm-2 pt-0">协议类型</legend>
									  <div class="col-sm-10">
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="protocol_type" id="protocolRadio1" value="1" checked>
											<label class="form-check-label" for="protocolRadio1">TCP</label>
										  </div>
										  <div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="protocol_type" id="protocolRadio2" value="2">
											<label class="form-check-label" for="protocolRadio2">UDP</label>
										  </div>
									  </div>
									</div>
								  </fieldset>
								  <div class="form-group row">
									<label for="address-second" class="col-sm-2 col-form-label">限速值</label>
									<div class="col-sm-10">
									  <input type="port" class="form-control" id="rate_value" placeholder="8000">
									</div>
								  </div>
							  </form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary" onclick="submitRule();">提交</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /添加规则-->
			<!-- 确认删除-->
			<div class="modal fade bd-example-modal-sm" id="delRuleModel" tabindex="-1" role="dialog" 
			aria-labelledby="删除规则" aria-hidden="true">
				<div class="modal-dialog modal-sm">
				  <div class="modal-content" >
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">规则删除确认</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						  <span aria-hidden="true">&times;</span>
						</button>
					  </div>
					  <div class="modal-body" id="delRuleModelContent">
						
					  </div>
					  <div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-danger" onclick="delRuleSure();">删除</button>
					  </div>
				  </div>
				
				</div>
			  </div>
			  <!-- /确认删除-->
			<!--Copy Rights-->
			{include f}
			<!-- /Copy Rights-->
		</div>
		<!-- /Page Content -->
	</div>
	<!-- Back to Top -->
	<a id="back-to-top" href="#" class="back-to-top">
		<span class="ti-angle-up"></span>
	</a>
	<!-- /Back to Top -->
	<!-- Jquery Library-->
	<script src="View/CQQ/js/jquery-3.2.1.min.js"></script>
	<!-- Popper Library-->
	<script src="View/CQQ/js/popper.min.js"></script>
	<!-- Bootstrap Library-->
	<script src="View/CQQ/js/bootstrap.min.js"></script>
	<!-- morris charts -->
	<!---
		
		<script src="View/CQQ/charts/js/raphael-min.js"></script>
	<script src="View/CQQ/charts/js/morris.min.js"></script>
	<script src="View/CQQ/js/custom-morris.js"></script>
		---->
	
	<script src="View/CQQ/js/jquery.jgrowl.js"></script>

	<!-- Custom Script-->
	<script type="text/javascript">
		document.write('<script  type=\'text/javascript\'  src="View/CQQ/js/index.js?v='+Math.random()+'"><\/script>');
	</script>
</body>

</html>